<template>
  <div class="card-with-background1">
    <div class="dl">
      <div class="card-with-background2">
      </div>
      <div class="card-with-background3">
        <h2 style="margin: 0px 0px 60px 80px; color:black;">云博生产制造系统</h2>
        <el-form :rules="rules" ref="form" :model="from" label-width="80px">
          <el-form-item prop="name" style="margin: 0px 0px 40px 0px;">
            <el-input :prefix-icon="'UserFilled'" v-model="from.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input :prefix-icon="'Lock'" v-model="from.pwd" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <input style="width: 10px; height: 10px; margin: 0px 0px 20px 80px;" type="checkbox" v-model="selectedOption"
            value="Option1"><span style="font-size: 12px;">记住用户名</span>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" style="width: 220px;">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, router } from 'vue'
import { useRouter } from 'vue-router';
// import { Search } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import axios from 'axios'
import CryptoJS from 'crypto-js';
export default {
  setup() {
    //加密方法
    function md5Encrypt(str) {
      return CryptoJS.MD5(str).toString();
    }
    const store = useStore();
    const router = useRouter();
    let from = reactive({
      name: "",
      pwd: ""
    })
    let uid=reactive({
          id:""
    })
    async function onSubmit() {
      

      // 表单验证  
      if (from.name === "" || from.pwd === "") {
         ElMessage.error("请填写完整的用户名和密码");
        return;
      }

      try {
        const response = await axios.get('/api/User/DenLu?Name='+from.name+'&Pwd='+md5Encrypt(from.pwd));
        // 处理响应，检查用户ID  
        if (response.data.user_id > 0) {
          uid.id=response.data.user_id;
          console.log(uid.id);
          sessionStorage.setItem('u',uid.id);
          router.push('/Home');  
        } else {
           ElMessage.error("账号或密码错误");
        }
      } catch (error) {
        console.error("请求错误:", error);
         ElMessage.error("服务器错误，请稍后重试。");
      }
    }
    const rules = {
      name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        // 其他验证规则...  
      ],
      pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        // 其他验证规则...  
      ]
      // 其他字段的验证规则...  
    };
    return {
      rules,
      from,
      onSubmit,

    }
  }
}
</script>

<style scoped>
.dl {
  background-color: white;
  width: 100%;
  /* 使用百分比宽度 */
  margin: 15% auto;
  /* 使用百分比外边距并水平居中 */
  max-width: 700px;
  /* 设置最大宽度 */
  /* border: 1px solid blue; */
  border-radius: 5px;
  box-sizing: border-box;
}

.card-with-background1 {
  background-image: url('@/assets/u106_state0.png');
  /* 使用 @ 符号表示 src 目录 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 99vw;
  /* 填满整个视口宽度 */
  height: 98vh;
  /* 填满整个视口高度 */
  position: relative;
  display: flex;
  /* 启用 Flexbox 布局 */
  justify-content: center;
  /* 横向居中 */
  align-items: center;
  /* 纵向居中 */
}

.card-with-background2 {
  width: 300px;
  height: 300px;
  margin: 20px 0px 0px 20px;
  background-image: url('@/assets/u10_div.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* border: 1px solid red;  */
  display: inline-block;
}

.card-with-background3 {
  width: 300px;
  height: 300px;
  display: inline-block;
}
</style>